<template>
  <div class="achievement-container">
    <van-notice-bar scrollable>
      *根据学校规定，完成以下信息填写才可以提交申请！
    </van-notice-bar>

    <div class="header">
      <h2>发布巡寝活动</h2>
      <p>填写活动信息，发布巡寝计划</p>
    </div>

    <van-cell-group inset>
      <van-field
          v-model="title"
          label="标题"
          placeholder="请输入巡寝活动标题"
          required
      />
    </van-cell-group>

    <van-cell-group inset>
      <van-field
          v-model="content"
          rows="5"
          autosize
          label="内容"
          type="textarea"
          maxlength="1000"
          placeholder="请详细描述巡寝活动内容"
          show-word-limit
          required
          style="margin-top: 20px"
      />
    </van-cell-group>

    <div class="dowm_bt">
      <van-button class="ljtj" @click="submit">发布活动</van-button>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import { useUserStore } from '../../Store/modules/userinfo/UserInfo.ts'
import {showFailToast, showSuccessToast} from "vant";
import router from "../../Router/index.js";
import {createDormitoryTaskUsingPost} from "../../Api/xunqinmokuai.js";

const userInfo = useUserStore()
const loading = ref(false)
const fileList = ref([])

const content = ref("")
const title = ref("")

async function submit(){
  if(!title.value.trim()) {
    showFailToast('请填写活动标题');
    return;
  }

  if(!content.value.trim()) {
    showFailToast('请填写活动内容');
    return;
  }

  loading.value = true;

  try {
    const response = await createDormitoryTaskUsingPost({
      publisherId: userInfo.userInfo.userId,
      content: content.value,
      title: title.value
    })

    if (response.data.code === 0){
      showSuccessToast('创建活动成功！');
      setTimeout(() => {
        router.push("/cqust/index")
      }, 1500)
    } else {
      showFailToast(response.data.message || '创建活动失败！');
    }

  } catch (err) {
    console.error(err)
    showFailToast('网络错误，请稍后重试');
  } finally {
    loading.value = false;
  }
}
</script>

<style scoped>
.achievement-container {
  height: 100vh;
  overflow-y: auto;
  padding: 10px;
  background-color: #f8f9fa;
}

.header {
  text-align: center;
  margin: 20px 0;
}

.header h2 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.header p {
  font-size: 14px;
  color: #888;
  margin: 0;
}

.van-cell-group {
  margin-bottom: 16px;
}

.upload-section {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}

.upload-title {
  color: #666;
  font-size: 14px;
  margin-bottom: 12px;
}

.uploader {
  margin-top: 8px;
}

.dowm_bt {
  width: 90%;
  margin: 20px auto;
  text-align: center;
}

.ljtj {
  width: 100%;
  background-color: rebeccapurple;
  border-radius: 20px;
  color: white;
  font-size: 16px;
  height: 44px;
}

.preview-cover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px;
  font-size: 12px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>